<template>
  <FormItemWrapper :widget="widget" :designer="designer">
    <iframe 
      src="http://localhost:3100/diyForm/input"
      height="100vh"
      width="100%"
      @load="setIframeHeight"
    />
  </FormItemWrapper>
 
</template>
<script lang="ts" name="test-iframe-widget" setup>
import { ref, computed, onMounted, provide } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { Icon } from '/@/components/Icon';
import { useAttrs } from '/@/hooks/core/useAttrs';
import FormItemWrapper from './FormItemWrapper.vue'
import type { Designer } from '../../type'
import { useWidget } from '../useWidget'
const props = defineProps({
  widget: { type: Object, default: {}},
  // componentProps: { type: Object, default: {}},
  designer: { type: Object as () => Designer},
  designerConfig: {
    type: Object,
    default: () => {
      return {
        formTemplates: true,  //是否显示表单模板
      }
    }
  },
})
const widgetProps = props.widget.props
const attrs = useAttrs()
provide('designerConfig', props.designerConfig);
const { watchDefaultValue } = useWidget()
watchDefaultValue(props)

const iframe = ref()
const setIframeHeight = () => {
    setTimeout(() => {
        iframe.value.height =
            iframe.value?.contentWindow?.document?.documentElement?.offsetHeight || 0
    }, 150)
}

</script>

<style lang="less">


</style>
